<template>
    <div class="timeCard222">
        <div class="timeType">
            <span
                class="timeTypeName"
                v-for="item in timeType"
                :key="item.type"
                @click="handeChangeTimeType(item)"
                :class="{daterange: item.type === 'daterange'}"
            >
                {{ item.name }}
                <i :class="{active: selectType === item.type}"></i>
            </span>
        </div>
        <div>
            <div class="timeSelect">
                <!-- 修改了'day'类型的日期选择器，将v-model改为:value并添加了@input事件 -->

                <!-- <el-date-picker
                    v-if="selectType === 'daterange'"
                    v-model="selectedDate"
                    :type="selectType"
                    style="width: 100%"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="changeDate"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker> -->

                <DatePicker
                    v-if="selectType === 'daterange'"
                    type="daterange"
                    v-model="selectedDate"
                    @on-change="changeDate"
                    placeholder="日期范围"
                    style="width: 220px"
                />

                <!-- 修改了非'day'类型的日期选择器，将v-model改为:value并添加了@input事件 -->
                <!-- <el-date-picker
                    v-if="selectType !== 'daterange'"
                    v-model="selectedDate"
                    :type="selectType"
                    style="width: 100%"
                    @change="changeDate"
                    :placeholder="selectType == 'year' ? '请选择年份' : '请选择月份'"
                    :value-format="valueFormat"
                >
                </el-date-picker> -->

                <DatePicker
                    v-if="selectType !== 'daterange'"
                    v-model="selectedDate"
                    :type="selectType"
                    @on-change="changeDate"
                    :placeholder="selectType == 'year' ? '请选择年份' : '请选择月份'"
                    style="width: 200px"
                />
            </div>
        </div>
    </div>
</template>
<script>
import {Utility} from '@/libs/utility.js'
export default {
    name: 'timeCard',
    data() {
        return {
            selectedDate: Utility.getCurrentDate(),
            selectType: 'year',
            valueFormat: 'yyyy',
            timeType: [
                {name: '年', type: 'year', valueFormat: 'yyyy'},
                {name: '月', type: 'month', valueFormat: 'yyyy-MM'},
                {name: '区间', type: 'daterange', valueFormat: 'yyyy-MM-dd'}
            ]
        }
    },
    methods: {
        handeChangeTimeType(timeType) {
            this.selectedDate = null
            this.selectType = timeType.type
            this.valueFormat = timeType.valueFormat
        },
        changeDate(date) {
            this.$emit('changeDate', {
                value: date,
                type: this.selectType
            })
        }
    },
    mounted() {
        this.$emit('changeDate', {
            value: Utility.getCurrentDate(),
            type: this.selectType
        })
    }
}
</script>

<style lang="scss">
.timeCard222 {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    // overflow: hidden;
    color: #303133;
    transition: 0.3s;
    margin-bottom: 10px;
    min-height: 85px !important;
    .timeType {
        display: flex;
        gap: 17px;
        background-color: #fafafa;
        border-bottom: 1px solid #ebeef5;
        padding: 5px 10px;

        .timeTypeName {
            position: relative;
            width: 32px;
            cursor: pointer;

            :hover {
                background-color: #3b8cfc;
                color: #fff;
            }

            > .active {
                position: absolute;
                bottom: -6px;
                left: -3px;
                width: 128%;
                height: 2px;
                background-color: #409eff;
            }
        }

        .daterange {
            width: 46px;
        }
    }

    .timeSelect {
        position: relative;
        height: 33px;
        padding: 10px;
        // ::v-deep .custom-datepicker-popper{
        //   position: absolute !important;
        //   top: 0 !important;
        //   left: 0 !important;
        // }
        .ivu-select-dropdown {
            z-index: 9999 !important;
        }
    }
}
</style>